<template>
    <el-dialog
        v-model="isShow"
        :align-center="true"
        :close-on-click-modal="false"
        :destroy-on-close="true"
        :title="formType === 'add' ? '添加字典类型' : '编辑字典类型'"
        class="dialog-box"
        @close="onCloseDialog"
    >
        <el-scrollbar max-height="450px">
            <el-form label-width="100" ref="formRef" :model="dictTypeForm" :rules="rules">
                <el-form-item prop="name" label="类型名称">
                    <el-input v-model="dictTypeForm.name" placeholder="请输入类型名称" clearable></el-input>
                </el-form-item>
                <el-form-item prop="code" label="编码">
                    <el-input v-model="dictTypeForm.code" placeholder="请输入编码" clearable></el-input>
                </el-form-item>
                <el-form-item prop="description" label="描述">
                    <el-input type="textarea" v-model="dictTypeForm.description" placeholder="请输入描述"></el-input>
                </el-form-item>
                <div class="dialog-form-item-group"></div>
                <el-form-item prop="sort" label="排序">
                    <el-input-number v-model="dictTypeForm.sort" :min="1" />
                </el-form-item>
                <el-form-item label="是否启用">
                    <el-switch v-model="dictTypeForm.isEnabled" />
                </el-form-item>
            </el-form>
        </el-scrollbar>
        <template #footer>
            <el-button @click="onCancel">取消</el-button>
            <el-button @click="onConfirm" type="primary">确认</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang="tsx">
import { DictTypeForm } from '@/api/system/dict/types'
import { FormInstance, FormRules } from 'element-plus'
const emit = defineEmits<{ onTableAction: [action: TableActionType, params: any] }>()
// 是否显示dialog
const isShow = ref(false)
// 表单实例 Ref
const formRef = ref<FormInstance>()
// 表单类型
const formType = ref<FormType>('add')
// 表单初始数据
const initform: Partial<DictTypeForm> = {
    id: undefined,
    name: '',
    code: '',
    sort: 1,
    description: '',
    isEnabled: true,
}
// 表单数据
const dictTypeForm = reactive<Partial<DictTypeForm>>({ ...initform })
// 表单校验规则
const rules = reactive<FormRules<DictTypeForm>>({
    name: [
        {
            type: 'string',
            required: true,
            message: '字典名称不能为空',
            trigger: 'change',
        },
    ],
    code: [
        {
            type: 'string',
            required: true,
            message: '字典编码不能为空',
            trigger: 'change',
        },
    ],
})
// 打开dialog
const onOpenDialog = (action: FormType, row?: DictTypeForm) => {
    formType.value = action
    if (action !== 'add' && row) {
        Object.assign(dictTypeForm, row)
    }
    isShow.value = true
}
// 关闭dialog
const onCloseDialog = () => {
    isShow.value = false
    Object.assign(dictTypeForm, initform)
}
// 取消
const onCancel = () => onCloseDialog()
// 完成确认
const onConfirm = async () => {
    emit('onTableAction', 'addOrEditSubmit', dictTypeForm)
}
defineExpose({
    onOpenDialog,
    onCloseDialog,
})
</script>

<style lang="scss" scoped></style>
